<template>
    <div class="min-h-full">
        <!-- 系统信息 -->
        <div class="mb-8 bg-white overflow-hidden rounded-lg shadow">
            <div class="p-5">
                <h2 class="text-lg font-medium text-gray-900 mb-4">系统信息</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="flex items-center">
                        <span class="font-medium text-gray-500">主机名：</span>
                        <span class="ml-2 text-gray-900">{{ systemInfo?.hostname || '加载中...' }}</span>
                    </div>
                    <div class="flex items-center">
                        <span class="font-medium text-gray-500">IP 地址：</span>
                        <span class="ml-2 text-gray-900">{{ systemInfo?.network.ip_addresses || '加载中...' }}</span>
                    </div>
                    <div class="flex items-center">
                        <span class="font-medium text-gray-500">外部 IP：</span>
                        <span class="ml-2 text-gray-900">{{ systemInfo?.network.external_ip || '加载中...' }}</span>
                    </div>
                    <div class="flex items-center">
                        <span class="font-medium text-gray-500">DNS 信息：</span>
                        <span class="ml-2 text-gray-900">{{ systemInfo?.network.dns_servers.join(', ') || '加载中...' }}</span>
                    </div>
                    <div class="flex items-center">
                        <span class="font-medium text-gray-500">WiFi 名称：</span>
                        <span class="ml-2 text-gray-900">{{ systemInfo?.network.wifi_name || '加载中...' }}</span>
                    </div>
                    <div class="flex items-center">
                        <span class="font-medium text-gray-500">操作系统：</span>
                        <span class="ml-2 text-gray-900">{{ systemInfo?.os_info.name || '加载中...' }}</span>
                    </div>
                    <div class="flex items-center">
                        <span class="font-medium text-gray-500">版本：</span>
                        <span class="ml-2 text-gray-900">{{ systemInfo?.os_info.version || '加载中...' }}</span>
                    </div>
                </div>
            </div>
        </div>
  
      <!-- 统计卡片区域 -->
      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 mb-8">
        <!-- 本机容器数 -->
        <div class="bg-white overflow-hidden rounded-lg shadow">
          <div class="p-5">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <UsersIcon class="h-6 w-6 text-gray-400" aria-hidden="true" />
              </div>
              <div class="ml-5 w-0 flex-1">
                <dl>
                  <dt class="text-sm font-medium text-gray-500 truncate">本机容器数</dt>
                  <dd class="flex items-baseline">
                    <div class="text-2xl font-semibold text-gray-900">8</div>
                    <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                      <ArrowUpIcon class="h-5 w-5 flex-shrink-0 self-center text-green-500" aria-hidden="true" />
                      <span class="ml-1">12%</span>
                    </div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 活跃容器 -->
        <div class="bg-white overflow-hidden rounded-lg shadow">
          <div class="p-5">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <UserCircleIcon class="h-6 w-6 text-gray-400" aria-hidden="true" />
              </div>
              <div class="ml-5 w-0 flex-1">
                <dl>
                  <dt class="text-sm font-medium text-gray-500 truncate">活跃容器</dt>
                  <dd class="flex items-baseline">
                    <div class="text-2xl font-semibold text-gray-900">3</div>
                    <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                      <ArrowUpIcon class="h-5 w-5 flex-shrink-0 self-center text-green-500" aria-hidden="true" />
                      <span class="ml-1">8.2%</span>
                    </div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 网络出口 -->
        <div class="bg-white overflow-hidden rounded-lg shadow">
          <div class="p-5">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <CurrencyYenIcon class="h-6 w-6 text-gray-400" aria-hidden="true" />
              </div>
              <div class="ml-5 w-0 flex-1">
                <dl>
                  <dt class="text-sm font-medium text-gray-500 truncate">网络出口</dt>
                  <dd class="flex items-baseline">
                    <div class="text-2xl font-semibold text-gray-900">墨西哥</div>
                    <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                      <ArrowUpIcon class="h-5 w-5 flex-shrink-0 self-center text-green-500" aria-hidden="true" />
                      <span class="ml-1"></span>
                    </div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 连接速度 -->
        <div class="bg-white overflow-hidden rounded-lg shadow">
          <div class="p-5">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <ChartBarIcon class="h-6 w-6 text-gray-400" aria-hidden="true" />
              </div>
              <div class="ml-5 w-0 flex-1">
                <dl>
                  <dt class="text-sm font-medium text-gray-500 truncate">连接速度</dt>
                  <dd class="flex items-baseline">
                    <div class="text-2xl font-semibold text-gray-900">100Mbps</div>
                    <div class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
                      <ArrowDownIcon class="h-5 w-5 flex-shrink-0 self-center text-red-500" aria-hidden="true" />
                      <span class="ml-1">2.1%</span>
                    </div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 最近活动列表 -->
      <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
          <h3 class="text-lg font-medium leading-6 text-gray-900">最近活动</h3>
        </div>
        <ul role="list" class="divide-y divide-gray-200">
          <li v-for="activity in recentActivities" :key="activity.id" class="px-4 py-4 sm:px-6 hover:bg-gray-50">
            <div class="flex items-center space-x-4">
              <div class="flex-shrink-0">
                <img class="h-8 w-8 rounded-full" :src="activity.userImage" alt="" />
              </div>
              <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-gray-900 truncate">
                  {{ activity.user }}
                </p>
                <p class="text-sm text-gray-500">
                  {{ activity.action }}
                </p>
              </div>
              <div class="text-sm text-gray-500">
                {{ activity.time }}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </template>
  
  <script setup>
  import {
    UsersIcon,
    UserCircleIcon,
    CurrencyYenIcon,
    ChartBarIcon,
    ArrowUpIcon,
    ArrowDownIcon,
  } from '@heroicons/vue/24/outline'
  import { ref, onMounted } from 'vue'
  import { invoke } from '@tauri-apps/api/core'

  const systemInfo = ref(null) // 用于存储系统信息

  async function fetchSystemInfo() {
    try {
      const info = await invoke('cmd_get_system_info') // 调用获取系统信息的函数
      systemInfo.value = info // 存储返回的系统信息
    } catch (error) {
      console.error('获取系统信息失败:', error)
      systemInfo.value = { error: '获取失败' } // 处理错误
    }
  }

  onMounted(() => {
    fetchSystemInfo() // 在组件挂载时获取系统信息
  })

  // 模拟最近活动数据
  const recentActivities = [
    {
      id: 1,
      user: 'TOM',
      action: 'WireGuard 连接 到 墨西哥',
      time: '10分钟前',
      userImage: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
    {
      id: 2,
      user: 'TOM',
      action: '创建了新容器Container-1 启动服务Nginx',
      time: '2小时前',
      userImage: 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
    {
      id: 3,
      user: 'TOM',
      action: '创建了新容器Container-2 启动服务Mysql',
      time: '3小时前',
      userImage: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
    {
      id: 4,
      user: 'TOM',
      action: '创建了新容器Container-3 启动服务 Redis',
      time: '5小时前',
      userImage: 'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  ]
  </script>